<template>
  <div class="app-container">
    <el-form :inline="true" ref="refForm" :model="form">
      <el-form-item label="查询时间" prop="time">
        <el-date-picker
          v-model="form.time"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerWeekStep">
        </el-date-picker>
      </el-form-item>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="submitFilterForm">搜索</el-button>
      <el-button v-if="roleCheck('export')" class="filter-item" type="primary" icon="el-icon-download"    @click="exportExcel">导出</el-button>
    </el-form>

    <el-table border :data="tableData" v-loading="loading" element-loading-text="加载中..."
              class="el-table-align-center">
      <el-table-column label="时间" prop="date" width="120" fixed="left" align="center">
      </el-table-column>
      <el-table-column width="120" label="01:00" align="center">
        <template slot-scope="{row}">
          {{ row.dataList[0].value | currency}}
        </template>
      </el-table-column>
      <el-table-column width="120" label="02:00" align="center">
        <template slot-scope="{row}">
          {{ row.dataList[1].value | currency}}
        </template>
      </el-table-column>
      <el-table-column width="120" label="03:00" align="center">
        <template slot-scope="{row}">
          {{ row.dataList[2].value | currency}}
        </template>
      </el-table-column>
      <el-table-column width="120" label="04:00" align="center">
        <template slot-scope="{row}">
          {{ row.dataList[3].value | currency}}
        </template>
      </el-table-column>
      <el-table-column width="120" label="05:00" align="center">
        <template slot-scope="{row}">
          {{ row.dataList[4].value | currency}}
        </template>
      </el-table-column>
      <el-table-column  width="120" label="07:00" align="center">
        <template slot-scope="{row}">
          {{ row.dataList[6].value | currency}}
        </template>
      </el-table-column>
      <el-table-column width="120" label="08:00" align="center">
        <template slot-scope="{row}">
          {{ row.dataList[7].value | currency}}
        </template>
      </el-table-column>
      <el-table-column label="09:00" width="120" align="center">
        <template slot-scope="{row}">
          {{ row.dataList[8].value | currency}}
        </template>
      </el-table-column>
      <el-table-column label="10:00" width="120" align="center">
        <template slot-scope="{row}">
          {{ row.dataList[9].value | currency}}
        </template>
      </el-table-column>
      <el-table-column label="11:00" width="120" align="center">
        <template slot-scope="{row}">
          {{ row.dataList[10].value | currency}}
        </template>
      </el-table-column>
      <el-table-column label="12:00" width="120" align="center">
        <template slot-scope="{row}">
          {{ row.dataList[11].value | currency}}
        </template>
      </el-table-column>
      <el-table-column label="13:00" align="center" width="120">
        <template slot-scope="{row}">
          {{ row.dataList[12].value | currency}}
        </template>
      </el-table-column>
      <el-table-column label="14:00" align="center" width="120">
        <template slot-scope="{row}">
          {{ row.dataList[13].value | currency}}
        </template>
      </el-table-column>
      <el-table-column label="15:00" align="center" width="120">
        <template slot-scope="{row}">
          {{ row.dataList[14].value | currency}}
        </template>
      </el-table-column>
      <el-table-column label="16:00" align="center" width="120">
        <template slot-scope="{row}">
          {{ row.dataList[15].value | currency}}
        </template>
      </el-table-column>
      <el-table-column label="17:00" align="center" width="120">
        <template slot-scope="{row}">
          {{ row.dataList[16].value | currency}}
        </template>
      </el-table-column>
      <el-table-column label="18:00" align="center" width="120">
        <template slot-scope="{row}">
          {{ row.dataList[16].value | currency}}
        </template>
      </el-table-column>
      <el-table-column label="19:00" align="center" width="120">
        <template slot-scope="{row}">
          {{ row.dataList[18].value | currency}}
        </template>
      </el-table-column>
      <el-table-column label="20:00" align="center" width="120">
        <template slot-scope="{row}">
          {{ row.dataList[19].value | currency}}
        </template>
      </el-table-column>
      <el-table-column label="21:00" align="center" width="120">
        <template slot-scope="{row}">
          {{ row.dataList[20].value | currency}}
        </template>
      </el-table-column>
      <el-table-column label="22:00" align="center" width="120">
        <template slot-scope="{row}">
          {{ row.dataList[21].value | currency}}
        </template>
      </el-table-column>
      <el-table-column label="23:00" align="center" width="120">
        <template slot-scope="{row}">
          {{ row.dataList[22].value | currency}}
        </template>
      </el-table-column>
      <el-table-column label="24:00" align="center" width="120">
        <template slot-scope="{row}">
          {{ row.dataList[23].value | currency}}
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>


<script>
  import {getStatisticalHoursWithdraw} from "@/services/api/statistical";
  import {form, pickerOption ,grid} from '@/build'

  export default {
    name: "statistics-hours-withdraw",
    mixins: [form, pickerOption ,grid],
    data() {
      return {
        tableData: [],
        form: {
          time: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
        },
        filters: {
          startDate: moment().format('YYYY-MM-DD'),
          endDate: moment().format('YYYY-MM-DD'),
          dataType: 1,
        },
      }
    },
    methods: {
      submitFilterForm() {
        const {time} = this.form;
        let stime = undefined, etime = undefined;
        if (!_.isUndefined(time) && _.isArray(time)) {
          stime = time[0];
          etime = time[1];
        }

        this.filters = {...this.filters, stime, etime}
        this.getAll()
      },
    },
    mounted() {
      this.bindGet(getStatisticalHoursWithdraw, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
       format: data => {
          let newArray = []
          let dataList = []
          _.forIn(data, (val, key) => {
            newArray.push({time: key, dataList: _.values(val)})
          })
          newArray = _.sortBy(newArray, (item) => {
            return item.time;
          })

          newArray.map((item,index)=>{
            _.forIn(item.dataList, (val, key) => {
              dataList.push({hour: key, value:val})
            })
            dataList = _.sortBy(dataList, (item) => {
              return item.hour;
            })
            item.dataList=dataList
            dataList=[]
          })
          return newArray
        }
      });
      this.getAll()
    }

  }
</script>

<style scoped>

</style>
